<template>
  <div class="imgBox" :style="{ width: boxWidth, height: boxHeight }">
    <img :src="src" :class="{ 'setWidth': !widthOrHeight, 'setHeight': widthOrHeight}">
  </div>

</template>
<script>

  export default {
    components: {},
    data() {
      return {
        imgWidth: 0,
        imgHeight: 0,
        newWidth: false,
        newHeight: false
      }
    },
    props: {
      src: {
        type: String,
        required: true,
//        default: '../../../static/images/userIcon.png'
        default: ''
      },
      boxWidth: {
        type: String,
        required: true,
      },
      boxHeight: {
        type: String,
        required: true
      }
    },
    watch: {
      src() {
        this.getWH();
      }
    },
    created() {
      this.getWH();
    },
    computed: {
      widthOrHeight() {
        return this.imgWidth > this.imgHeight;
      }
    },
    methods: {
      getWH() {
        let img = new Image();
        img.src = this.src;
        img.onload = () => {
          this.imgWidth = img.width;
          this.imgHeight = img.height;
        }
      }
    }
  }
</script>
<style lang="less" scoped>

  .imgBox {
    position: relative;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-block;
    /*transform: rotate(0deg);*/
  }

  .setWidth {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .setHeight {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
</style>
